<template>
	<z-paging ref="paging" v-model="searchData" @query="queryList" :show-loading-more-no-more-view="false" inside-more>
		<template slot="top">
			<cl-navbar autoBack placeholder :title="$t('chat.msg.type.b_c')"></cl-navbar>
		</template>
		<view style="padding: 0 30rpx;">
			<view v-for="(item, index) in searchData" :key="index" style="margin-top: 30rpx;">
				<view style="width: 690rpx;margin-bottom: 20rpx;" v-show="index === 0 || !sameMonth(item, searchData[index - 1])">
					{{$u.timeFormat(item.create_time, 'yyyy年mm月')}}
				</view>
				<view style="display: flex;align-items: start;">
					<cl-avatar :src="isMe(item.sender_id) ? user_info.avatar_url : userInfoOther(item) && userInfoOther(item).avatar_url || ''"
						size="100rpx"></cl-avatar>
					<view style="margin-left: 20rpx;">
						<view style="font-size: 24rpx;color: #595A66;display: flex;justify-content: space-between;margin-bottom: 10rpx;">
							<span>{{isMe(item.sender_id) ? user_info.nick_name : userInfoOther(item) && (userInfoOther(item).group_nickname || userInfoOther(item).user_nickname)}}</span>
						</view>
						<view class="content other">
							<view class="cardview" @click="mingpian(item)">
								<view class="cardview__top">
									<cl-avatar :src="item.content_text[0].b_c.avatar_url" size="100rpx"></cl-avatar>
									<text
										class="cardview__top__nickname u-line-1">{{item.content_text[0].b_c.nick_name}}</text>
								</view>
								<view
									style="width: 100%;height: 2rpx;margin: 15rpx 0 5rpx;background-color: #292A3A;">
								</view>
								<text class="cardview__bottom">
									{{item.content_text[0].b_c.type == 'private'?$t('chat.msg.type.personalCard'):item.content_text[0].b_c.type == 'group'?$t('chat.msg.type.groupCard'):$t('chat.msg.type.otherCard')}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import msgSqlite from '@/sqlite_services/msg.js'
	import {
		mapState
	} from 'vuex'
	import {
		replaceEmojis
	} from '@/components/cl-chat-input/o-emoji/emoji.js';
	export default {
		name: 'chatHistory',
		data() {
			return {
				searchval:'',
				searchData:[]
			}
		},
		computed: {
			...mapState({
				chatInfo: state => state.chat.chatInfo,
				user_info: state => state.user.user_info,
				groupMemberInfo: state => state.groupMembersInfo.groupMemberInfo,
			}),
			isMe() {
				return (uuid) => {
					if (uuid == this.user_info.user_id) return true
					return false
				}
			},
			userInfoOther() {
				return (item) => {
					let useitem = this.groupMemberInfo[item.sender_id]
					console.log(useitem);
					if (useitem) {
						return useitem
					}else{
						this.fetchGroupUserInfo({
							userId: item.sender_id,
							groupId:this.chatInfo.uuid
						});
					}
					return null
				}
			},
			messageText() {
				return (text) => {
					return replaceEmojis(text)
				}
			},
			getPermission() {
				return (type) => {
					if (this.chatGroupInfo == null || this.chatGroupInfo.mygroup == '0') return false
					// 0所有人 1普通用户 2管理员 3都不允许
					if (this.chatGroupInfo[type] == '0') {
						return true
					} else if (this.chatGroupInfo[type] == '1') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole != 'manager') return true
					} else if (this.chatGroupInfo[type] == '2') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole != 'member') return true
					} else if (this.chatGroupInfo[type] == '3') {
						if (this.chatGroupInfo.userRole && this.chatGroupInfo.userRole == 'creator') return true
					}
					return false
				}
			},
		},
		onLoad() {
			console.log(this.chatInfo);
		},
		methods: {
			// 判断两个日期是否是同一个月份
			sameMonth(item1, item2) {
				if (!item1 || !item2) return false;
				const date1 = new Date(item1.create_time);
				const date2 = new Date(item2.create_time);
				return date1.getMonth() === date2.getMonth() && date1.getFullYear() === date2.getFullYear();
			},
			queryList(pageNo, pageSize){
				let offset = this.searchData.length
				if(pageNo == 1){
					offset = 0
				} 
				msgSqlite.getMsgSortList({
					chat_type:'group',
					msg_type:'b_c',
					uuid:this.chatInfo.uuid
				},{
					pageSize,
					offset
				}).then(results => {
					if (results) {
						results.map((result,index) => {
							result.content_text = JSON.parse(result.content_text)
						});
						this.$refs.paging.complete(results);
					}
				}).catch(e => {
					this.$refs.paging.complete(false);
				})
			},
			async mingpian(item) {
				uni.$u.throttle(async()=>{
					let {
						card_user_id,
						nick_name,
						avatar_url,
						type
					} = item.content_text[0].b_c
					if (type == 'private') {
						if(card_user_id == this.$store.state.user.user_info.user_id){
							return
						}
						if (!this.getPermission('can_add_friends')) {
							uni.showToast({
								title:this.$t("group.group_members.memberBeingProtected"),
								icon:'none'
							})
							return
						}
						try {
							let friendRes = await uni.$api.friends.isFriend({
								friend_id: card_user_id
							})
							if (friendRes && friendRes.data.is_friend) {
								this.$Router.push({
									name: 'friend_details',
									params: {
										friend_idx: card_user_id,
										avatar_url: avatar_url,
										nick_name: nick_name,
										skipAgain: true, //再次进入聊天页面
									}
								});
								return
							}
						} catch (e) {}
						this.$Router.push({
							name: 'add_member_details',
							params: {
								user_id: card_user_id,
								nick_name: nick_name,
								avatar_url: avatar_url,
								isGroupGo: true
							}
						});
					}
				}, 1000)
			},
		},
	};
</script>

<style scoped lang="scss">
	.navView{
		display: flex;
		align-items: center;
		width: 750rpx;
		padding-right: 40rpx;
		.searchview {
			flex: 1;
			margin: 20rpx 30rpx;
			background-color: #1e1f30;
			border-radius: 60rpx;
			
		}
	}
	.searchContentBtn{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200rpx;
		color: #6a6b76;
		font-size: 32rpx;	
		.searchtypeView{
			margin-top: 50rpx;
			display: flex;
			align-items: center;
			color: #FFFFFF;
			.searchtypeViewItem{
				margin: 0 30rpx;
			}
		}
	}
	.content {
		padding: 20rpx;
		max-width: 520rpx;
		border-radius: 15rpx;
		font-size: 28rpx;
		background: #1E1F30;
	
		&.other {
			padding: 3rpx;
			margin: 0;
		}
	}
	.cardview {
		width: 480rpx;
		padding: 15rpx 15rpx 10rpx;
	
		&__top {
			display: flex;
			align-items: center;
	
			&__nickname {
				margin-left: 15rpx;
				font-size: 32rpx;
			}
		}
	
		&__bottom {
			font-size: 20rpx;
			color: #61626e;
		}
	}
</style>